<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./common.css">
    <link rel="stylesheet" href="./style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mac</title>
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2726470_axk444robb.css">
    
</head>
<body>
    <!-- top开始 -->
     <div class="top">
       <div class="content">
           <div class="left">
               <ul>
                   <li>教育商店首页
                       <span>丨</span>
                   </li>
                   <li>退出商店</li>
                </ul>
           </div>
           <div class="right">
               <span>&lt;广告&gt;</span>
           </div>
       </div>
     </div>
    <!-- top结束 -->

    <!-- nav开始 -->
      <div class="nav">
          <div class="nav_content">
            <ul>
                <li class="icon-search-copy"></li>
                <li>商店</li>
                <li>Mac</li>
                <li>Ipad</li>
                <li>Iphone</li>
                <li>Watch</li>
                <li>Music</li>
                <li>技术支持</li>
                <li class="iconfont icon-sousuo"> </li>
                <li class="iconfont icon-gouwudai"></li>
            </ul>
          </div>
      </div>
    <!-- nav结束 -->
    <!-- 产品展示开始 -->
      <div class="pro">
          <div class="pro_content">
              <ul>
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">MacBook Air</p>
                </li>                  
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">MacBook Pro 13 英寸</p>
                </li>                 
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">MacBook Pro 16 英寸</p>
                </li>                 
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">iMac 24 英寸 </p>
                    <p class="status">新款</p>
                </li>                  
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">iMac 27 英寸</p>
                </li>                  
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">Mac Pro</p>
                </li>                  
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">Mac mini
                    </p>
                </li>                  
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">机型比较</p>
                </li>                 
                 <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">Pro Display XDR</p>
                </li>                  
                <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">配件</p>
                </li>                  <li>
                    <div class="iconfont icon-diannao"></div>
                    <p class="dec">Big Sur</p>
                </li>
              </ul>
          </div>
      </div>
    <!-- 产品展示结束 -->
    <!-- 广告开始 -->
    <div class="adv">
        <p>
            为高校生活购买 Mac，可享教育优惠，让你省更多，还有 AirPods 搭配其中。 <span>立即选购&nbsp;&gt;</span>
        </p>
    </div>
    <!-- 广告结束 -->
    <!-- imack开始 -->
    <div class="imac">
        <div class="imac_content">
            <p class="status">新款</p>
            <h1 class="name">iMac</h1>
            <h3 class="flag">新开篇</h3>
            <p class="price">RMB 999起</p>
            <div class="btn">购买</div>
            <p class="details">进一步了解&nbsp;&gt;</p>
            <div class="img">
                <img src="../../../hero_imac_24__eq5phrdpwjyq_large.jpg" alt="">
            </div>
        </div>
    </div>
    <!-- imack结束 -->
    <!-- 推荐开始 -->
     <div class="tuijian">
         <h1 class="nakuan">哪款Mac适合你？</h1>
         <div class="bijiao">比较各款Mac机型&nbsp;&gt;</div>
         <ul class="choose">
            <li class="one">笔记本电脑</li>
            <li class="two">台式电脑</li>
        </ul>
      <div class="shows" >
        <div class="show_1">
            <div class="pic1"></div>
            <p class="wenzi1">MacBook Air</p>
            <p class="wenzi2">RMB 7999 起</p>
            <div class="color1"></div>
            <div class="goumai1">购买</div>
            <div class="chicun1">13.3英寸</div>
            <div class="xianshi1">视网膜显示屏¹</div>
            <div class="tup1"></div>
            <div class="xinp1">Apple M1 芯片</div>
            <div class="tup4"></div>
            <div class="peiz1">最高可选配16GB统一内存</div>
            <div class="huiz3">更强大的性能和能效表现</div>
            <div class="zuig1">最高可选配</div>
            <div class="tb1">2TB</div>
            <div class="cc1">存储容量²</div>
            <div class="tup7"></div>
            <div class="dianc1">电池续航最长达 18 小时³</div>
            <div class="tup10"></div>
            <div class="gaoq1">720p FaceTime 高清摄像头</div>
            <div class="dap1">搭配 M1 芯片的图像信号处理器，</div>
            <div class="biaox1">可大幅提升拍摄表现</div>
            <div class="qiank1">1.29 千克</div>
            <div class="zhongl1">重量</div>
            <div class="chuk1"></div>
            <div class="chuk2">触控 ID</div>
            <div class="liaoj1">进一步了解&nbsp;&gt;</div>
        </div>
        <div class="show_2">
            <div class="pic2"></div>
            <p class="wenzi3">MacBook Pro 13 英寸</p>
            <p class="wenzi4">RMB 9999 起</p>
            <div class="color2"></div>
            <div class="goumai2">购买</div>
            <div class="chicun2">13.3英寸</div>
            <div class="xianshi2">视网膜显示屏¹</div>
            <div class="tup2"></div>
            <div class="xinp2">Apple M1 芯片</div>
            <div class="huiz1">同时提供Inter Core i5或</div>
            <div class="huiz2">i7处理机型</div>
            <div class="tup5"></div>
            <div class="peiz2">最高可选配 16GB 统一内存</div>
            <div class="huiz4">更强大的性能和能效表现</div>
            <div class="zuig2">最高可选配</div>
            <div class="tb2">2TB</div>
            <div class="cc2">存储容量²</div>
            <div class="tup8"></div>
            <div class="dianc2">电池续航最长达 20 小时³</div>
            <div class="tup11"></div>
            <div class="gaoq2">720p FaceTime 高清摄像头</div>
            <div class="dap2">搭配 M1 芯片的图像信号处理器，</div>
            <div class="biaox2">可大幅提升拍摄表现</div>
            <div class="qiank2">1.4 千克</div>
            <div class="zhongl2">重量</div>
            <div class="chuk3"></div>
            <div class="chuk4">触控栏和触控 ID</div>
            <div class="liaoj2">进一步了解&nbsp;&gt;</div>
        </div>
        <div class="show_3">
            <div class="pic3"></div>
            <p class="wenzi5">MacBook Pro 16 英寸</p>
            <p class="wenzi6">RMB 18，999 起</p>
            <div class="color3"></div>
            <div class="goumai3">购买</div>
            <div class="chicun3">16英寸</div>
            <div class="xianshi3">视网膜显示屏¹</div>
            <div class="tup3"></div>
            <div class="xinp3">最高可选配Inter Core i9 处理器</div>
            <div class="tup6"></div>
            <div class="peiz3">最高可选配 64GB 内存</div>
            <div class="zuig3">最高可选配</div>
            <div class="tb3">8TB</div>
            <div class="cc3">存储容量²</div>
            <div class="tup9"></div>
            <div class="dianc3">电池续航最长达 11 小时³</div>
            <div class="tup12"></div>
            <div class="gaoq3">720p FaceTime 高清摄像头</div>
            <div class="qiank3">2.0 千克</div>
            <div class="zhongl3">重量</div>
            <div class="chuk5"></div>
            <div class="chuk6">触控栏和触控 ID</div>
            <div class="liaoj3">进一步了解&nbsp;&gt;</div>
        </div>
     </div>

     </div>
    <!-- 推荐结束 -->
    <!-- 海报1开始 -->
    <div class="haib">
        <div class="haib1">
            <div class="item1">
              <h1 style="font-size: 45px;">为高校生活<br>购买 Mac，<br> AirPods<br> 搭配其中◊。</h1>
              <p>教育优惠省更多&nbsp;&gt;</p>
            </div>
            <div class="item2"></div>
        </div>
    </div>
    <!-- 海报1结束 -->
    <!-- 选购开始 -->
    <div class="opt">
        <div class="backg">
          <div class="opt1">
            <h2 class="parts">配件</h2>
            <h1>探索 Mac 精彩配件。</h1>
            <div class="anniu">选购</div>
            <div class="goods">
            </div>
          </div>
        
          <div class="opt2">
              <h2 class="plan">Apple Trade In 换购计划</h2>
              <h3 class="youhui">换购新 Mac，<br>
                享受折抵优惠。</h3>
              <h3 class="zhedi">你可用符合条件的电脑来获得折抵优惠，也可选择免费回收处理。<br>这样一来，你受益，地球也受益9。</h3>
              <p class="knows">了解你设备的折抵金额&nbsp;&gt;</p>
              <div class="photos"><img src="../trade_in_mac_tile__f5rx9jv08geq_large.jpg" alt=""></div>
          </div>
        </div>
    </div>
    <!-- 选购结束 -->
    <!-- 问好开始 -->
    <div class="wenhao">
        <div class="wenhao1">
            <div class="words">
                <div class="english">macOS Monterey </div>
                <div class="biaox">各种超赞表现，<br>
                    向大家问好。</div>
                <div class="xiandu">先睹为快&nbsp;&gt;</div>
            </div>
            <div class="mingx"></div>
        </div>
    </div>
    <!-- 问好结束 -->
</body>
</html>